<template>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
                      <a-form-item label="单据编号">
                          <j-input placeholder="请输入单据编号" v-model="queryParam.purchaseBill"></j-input>
                      </a-form-item>
                  </a-col>
                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
                      <a-form-item label="申请部门">
                          <j-select-depart placeholder="请选择申请部门" v-model="queryParam.departId" />
                      </a-form-item>
                  </a-col>
                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
                      <a-form-item label="申请人">
                          <select-user-by-dep placeholder="请选择申请人" v-model="queryParam.proposer" />
                      </a-form-item>
                  </a-col>
                  <!-- <template v-if="toggleSearchStatus"></template> -->
                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
                      <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                          <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                          <a-button type="primary" @click="searchReset" icon="reload"
                              style="margin-left: 8px">重置</a-button>
                          <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                              {{ toggleSearchStatus ? '收起' : '展开' }}
                              <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                          </a> -->
                      </span>
                  </a-col>
              </a-row>
          </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
          <a-button @click="handleExportXls('物品领用清单')" type="primary" icon="download"
              :disabled="isDisabledAuth('erpPurchaseRecipients:add')">导出</a-button>
          <a-popover title="自定义列" trigger="click" placement="leftBottom">
              <template slot="content">
                  <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                      <a-row>
                          <template v-for="(item, index) in defColumns">
                              <template v-if="item.key != 'rowIndex' && item.dataIndex != 'action'">
                                  <a-col :span="12" :key="index"><a-checkbox :value="item.dataIndex">{{ item.title
                                  }}</a-checkbox></a-col>
                              </template>
                          </template>
                      </a-row>
                  </a-checkbox-group>
              </template>
              <a style="float: right;"><a-icon type="setting" :style="iconStyle" /></a>
          </a-popover>
      </div>

      <!-- table区域-begin -->
      <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
              <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
                  selectedRowKeys.length }}</a>项
              <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>

          <a-table ref="table" size="middle" :scroll="{ x: '130%' }" 
              :components="draggableComponent" bordered rowKey="id" :columns="columns"
              :dataSource="dataSource" :pagination="ipagination" :loading="loading"
              :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
              :customRow="customRow" @change="handleTableChange">
              <a slot="purchaseBill" slot-scope="text, record" @click="getDetail(record.id)">{{ text }}</a>
              <template slot="provision" slot-scope="text,record">
                  <span>{{ record.provisionBroad_dictText + '-' + record.provisionSmall_dictText }}</span>
              </template>
              <span slot="notify" slot-scope="text, record">
                  <a-icon title="催办提醒" v-if="record.taskUrge" theme="twoTone" twoToneColor="#eb2f96"
                      @click="taskNotifyMe(flowCode, record.id)" type="notification" />
                  {{ text }}
              </span>
              <template slot="status" slot-scope="status">
                  <a-badge :status="status | statusTypeFilter" :text="status | statusFilter" />
              </template>
              <span slot="action" slot-scope="text, record">
                  <template>
                      <a-button v-if="record.outboundFlag === '0'" type="primary" size="small" @click="outStore(record)"
                          v-has = "'ErpPurchaseGoodsReceiveList:outbound'">出库</a-button>
                      <a-button v-if="record.outboundFlag === '1'" type="primary" size="small"
                          @click="outStoreRecord(record)"
                          v-has="'ErpPurchaseGoodsReceiveList:boundRecord'">出库记录</a-button>
                  </template>
              </span>
          </a-table>
      </div>
      <ErpPurchaseOutStoreDetail ref="outStoreDetail" @refresh="searchQuery" page="receive"></ErpPurchaseOutStoreDetail>
  </a-card>
</template>
  
<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgBpmListMixin } from '@/mixins/JeecgBpmListMixin'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import ErpPurchaseOutStoreDetail from './modules/ErpPurchaseOutStoreDetail'

export default {
    name: 'ErpPurchaseRecipientsList',
    mixins: [JeecgBpmListMixin, mixinDevice, DisabledAuthFilterMixin],
    components: {
        SelectUserByDep,
        ErpPurchaseOutStoreDetail
    },
    data() {
        return {
            description: '物品领用单管理页面',
            // 表头
            columns: [],
            // 列设置
            settingColumns: [],
            // 列定义
            defColumns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '单据编号',
                    align: 'center',
                    width: 200,
                    dataIndex: 'purchaseBill',
                    scopedSlots: { customRender: 'purchaseBill' },
                    ellipsis: true
                },
                {
                    title: '申请人',
                    align: 'center',
                    width: 200,
                    dataIndex: 'proposer_dictText',
                    ellipsis: true,
                },
                {
                    title: '申请部门',
                    align: 'center',
                    width: 300,
                    dataIndex: 'departId_dictText',
                    ellipsis: true,
                },
                {
                    title: '领用团队',
                    align: 'center',
                    width: 300,
                    dataIndex: 'teamId_dictText',
                    ellipsis: true,
                },
                {
                    title: '申请时间',
                    align: 'center',
                    width: 200,
                    dataIndex: 'createTime',
                    ellipsis: true
                },
                {
                    title: '备注',
                    align: 'center',
                    width: 300,
                    dataIndex: 'remark',
                    ellipsis: true
                },
                {
                    title: '审核状态',
                    align: 'center',
                    dataIndex: 'bpmStatus_dictText'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    fixed: 'right',
                    width: 120,
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'action'
                    }
                }
            ],
            url: {
                list: '/api/erp/purchase/recipients/erpPurchaseRecipients/inventory',
                exportXlsUrl: '/api/erp/purchase/recipients/erpPurchaseRecipients/exportXlsNew',
                // bizCount: '/api/erp/purchase/recipients/erpPurchaseRecipients/bizCount'
            },
            dictOptions: {},
            processId: '1540222590478475266',


        }
    },
    created() {
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
    },
    methods: {
        //出库
        outStore(record) {
            this.$refs.outStoreDetail.showModal(record, 'out')
        },
        // 出库记录
        outStoreRecord(record) {
            this.$refs.outStoreDetail.showModal(record, 'detail')
        },
        // 重新加载
        handleSuccess() {
            this.loadData();
            this.$refs.modalForm.handleCancel()
            this.onClearSelected();
        },
        //查看详情
        getDetail(id) {
            this.$router.push({
                path: `/erp/purchase/recipients/ErpPurchaseRecipientsListDetail/${id}`,
            })
        },
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
  